<template>
  <div class="login">
    <headers heatle="账号绑定"></headers>
    <div style="margin-top: 1rem">
      <input class="username" type="text" v-model="phone" placeholder="请输入手机号">
      <div class="codebox">
        <input class="code" type="text" placeholder="请输入验证码"><span v-show="!show" class="count">{{count}}秒</span><span v-show="show" @click="getCode">获取验证码</span>
      </div>
      <mu-flex justify-content="center" align-items="center">
        <mu-button full-width color="darkgoldenrod">确认绑定</mu-button>
      </mu-flex>
    </div>

  </div>

</template>

<script>
  import headers from '@/components/headers'

    export default {
        name: "login",
      data(){
        return {
          show: true,
          count: '获取验证码',
          timer: null,
          phone:''
        }
      },
      components:{
        headers
      },
      methods:{
        username(){

        },
        getCode(){
          var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
          if(this.phone==''){
            alert("请输入手机号码");

          }else if(!reg.test(this.phone)){
            alert("手机格式不正确");
          }else{
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }
            /*axios.post(url).then(
                res=>{
                this.phonedata=res.data;
            })*/
          }



        }
      }
    }
</script>

<style scoped>
  .login{
    /*padding-top: 1.2rem;*/
  }
  .username{
    width: 90%;
    height: .4rem;
    border:  0;
    border-bottom: 1px solid #999;
    border-radius: 0;
    margin: 0.1rem auto;
  }
  .codebox{
    width: 90%;
    border-bottom: 1px solid #999;
    height: .4rem;
    margin: .1rem auto;
  }
  .code{
    width: 70%;
    height: .39rem;
    border:  0;
    float: left;
  }
  .codebox span{
    float: left;
    height: .3rem;
    margin-top: 0.05rem;
    display: block;
    line-height: .3rem;
    width: 30%;
    border: 1px solid darkgoldenrod;
  }
  .mu-raised-button{
    width: 80% !important;
  }
</style>
